<template>
  <div id="chooseAt">
    <el-dialog
      title="提示"
      :visible.sync="show"
      width="40%"
      :before-close="handleClose"
    >
      <div class="search">
        <el-input size="mini" />
        <el-input size="mini" />
        <el-button type="primary">搜索</el-button>
      </div>
      <el-table
        :data="list"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="name"
          label="姓名"
          width="180"
        />
        <el-table-column
          prop="address"
          label="地址"
        />
        <el-table-column
          prop="mobile"
          label="联系方式"
        />
        <el-table-column
          label="选择"
        >
          <template slot-scope="scope">
            <el-button type="primary" @click="choose(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'ChooseAt',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: [{ name: '代理商1', address: '杭州市', mobile: '12345678' }, { name: '代理商2', address: '杭州市', mobile: '000000000' }, { name: '代理商3', mobile: '999999999' }]
    }
  },
  created() {
    console.log(this.show, '123')
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    choose(row) {
      this.$emit('choose', row)
    }
  }
}
</script>
<style lang='scss' scoped>
.search {
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
  .el-input {
    width: 200px;
    margin-right: 10px;
  }
}
</style>
